import React from 'react';
import ReactDom from 'react-dom';
import Button from 'views/component/button/button';
import './smithy.scss';
import { api } from 'js/api/api';
import Strengthen from './strengthen';
import Enchant from './enchant';
import Gem from './gem';
import Decompose from './decompose';

class Main extends React.Component {
    constructor() {
        super()
        this.state = {
            bag: {},
            warehouse: null,
            selectPartnerId: null,
            selectBagIndexId: null,
            selectEquimentType: null,
            selectPartner: null,
            showType: 1
        }
    }
    componentDidMount() {
        this.getBag();
    }
    getBag = () => {
        api('getBag', (err, data) => {
            this.setState({ bag: data })
        });
    }
    getWarehouse = () => {
        api('getWarehouse', (err, data) => {
            this.setState({ warehouse: data })
        });
    }
    close = () => {
        if (this.props.beforeClose) {
            this.props.beforeClose();
        }
        this.props.close();
    }
    onClick = (indexId, partner) => {
        this.setState({ selectPartnerId: indexId, selectPartner: partner })
    }
    bagClick = (index) => {
        let item = this.state.bag.items[index];
        if (item) {
            if (window.totalConfigById[item.templateId].templateType === 51) {
                this.setState({ selectBagIndexId: index })
                return;
            }
        }
        this.setState({ selectBagIndexId: null })
    }
    equiment = (bagIndex, weaponType = 0) => {
        api('equip', { bagIndex: bagIndex, partnerId: this.state.selectPartnerId, weaponType: weaponType }, (err, data) => {
            this.setState({ selectBagIndexId: null });
        });
    }
    equipUnload = (selectEquimentType) => {
        api('equipUnload', { weaponPart: selectEquimentType, partnerId: this.state.selectPartnerId }, () => {
            this.setState({ selectEquimentType: null })
            this.getBag();
        })
    }
    discard = () => {
        if (this.state.selectBagIndexId !== null) {
            api('bagDiscard', { bagIndex: this.state.selectBagIndexId }, () => {
                this.getBag();
            })
        }
    }
    getEquipmentText = (type) => {
        if (this.state.selectPartner) {
            let equipment = this.state.selectPartner.equipments[type];
            let equipmentConfig = totalConfig.equipment[equipment.templateId];
            return equipment.name;
        }
    }
    equipmentClick = (type) => {
        if (this.state.selectPartner) {
            let equipment = this.state.selectPartner.equipments[type];
            if (equipment) {
                this.setState({ selectEquimentType: type, selectBagIndexId: null });
            }
        }
    }
    render() {
        let { bag, warehouse, selectPartnerId, selectPartner, selectBagIndexId, selectEquimentType, showType } = this.state;

        let node;
        if (showType === 1) {
            node = <Strengthen bag={bag} complete={() => { this.setState({}) }} />
        } else if (showType === 2) {
            node = <Enchant bag={bag} complete={() => { this.setState({}) }} />
        } else if (showType === 3) {
            node = <Gem bag={bag} complete={() => { this.setState({}) }} />
        } else if (showType === 4) {
            node = <Decompose bag={bag} complete={() => { this.setState({}) }} />
        }

        return <div id="smithy" className="flex-col">
            <div className="head">铁匠铺</div>
            <div className="desc">这里是冒险者的聚集地.冒险者们在这里休息调整,交流他们的冒险经验.</div>
            <div className="smithy-content flex-g-1">
                {node}
            </div>
            <div className="menu flex">
                <div className={"menu-item flex-center" + (showType === 1 ? ' menuActive' : '')} onClick={() => { this.setState({ showType: 1 }) }}>
                    <div>装备强化</div>
                </div>
                <div className={"menu-item flex-center" + (showType === 2 ? ' menuActive' : '')} onClick={() => { this.setState({ showType: 2 }) }}>
                    <div>装备附魔</div>
                </div>
                <div className={"menu-item flex-center" + (showType === 3 ? ' menuActive' : '')} onClick={() => { this.setState({ showType: 3 }) }}>
                    <div>镶嵌宝石</div>
                </div>
                <div className={"menu-item flex-center" + (showType === 4 ? ' menuActive' : '')} onClick={() => { this.setState({ showType: 4 }) }}>
                    <div>装备分解</div>
                </div>
                <div className="flex-g-1"></div>
                <div className="team menu-item flex-center" onClick={this.close}>
                    <div>关闭</div>
                    <div className="fonts fonts-arrow-right2"></div>
                </div>
            </div>
        </div>
    }
}

export default Main;